<template>
	<div class="dealer-container">
		<div class="betslip">
			<strong class="strong">
				{{ $t('game.game_betslip.note_information') }}
			</strong>
			<div>
				<el-row class="paddingLR paddingB">
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_number') }}：
						{{ dataList.id || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.generated_id') }}：
						{{ dataList.generatedId || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.venue_name_details') }}：
						{{ dataList.venueName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_manage.game_name') }}：
						{{ dataList.gameTypeName || '-' }}
					</el-col>

					<el-col :span="6">
						{{ $t('game.game_betslip.bet_amount') }}：
						<span :style="{color: amountColor(dataList.betAmount)}" v-if="dataList.betAmount">
							{{ handleCurrency(lookMsgList.memberCurrency) }}
							<span v-if="lookMsgList.memberCurrency === 'VND'">
								{{
									handleNumber(
										lookMsgList.memberCurrency,
										dataList.betAmount
									)
								}}
							</span>
							<span v-else>
								{{
									dataList.betAmount !== null
										? handleNumber(
											lookMsgList.memberCurrency,
											dataList.betAmount
										)
										: '-'
								}}
							</span>
						</span>
						 <span v-else>
							-
						 </span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.efficient_bet') }}：
						<span :style="{color: amountColor(dataList.validBetAmount)}">
						{{ handleCurrency(lookMsgList.memberCurrency) }}
						<span v-if="lookMsgList.memberCurrency === 'VND'">
							{{
								handleNumber(
									lookMsgList.memberCurrency,
									dataList.validBetAmount
								)
							}}
						</span>
						<span v-else>
							{{
								dataList.validBetAmount !== null
									? handleNumber(
									lookMsgList.memberCurrency,
									dataList.validBetAmount
								)
									: '-'
							}}
						</span>
					</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.betting') }}：
						{{ dataList.playOptionName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_status') }}：{{
							_typeFilter(dataList.betStatus, 'qklStatusType')
						}}
					</el-col>

					<el-col :span="6">
						{{ $t('game.game_betslip.lottery_block') }}：
						{{ dataList.blockHash || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.lottery_hash') }}：
						{{ dataList.hashBankerResult || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bonus_amount') }}：
						{{ handleCurrency(lookMsgList.memberCurrency) }}
						<span v-if="lookMsgList.memberCurrency === 'VND'">
							{{
								handleNumber(
									lookMsgList.memberCurrency,
									dataList.payAmount
								)
							}}
						</span>
						<span v-else>
							{{
								dataList.payAmount !== null
									? handleNumber(
									lookMsgList.memberCurrency,
									dataList.payAmount
								)
									: '-'
							}}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_device') }}：
						{{
							dataList.obDeviceType === '其他'
								? dataList.obDeviceType
								: typeFilter(
										dataList.obDeviceType,
										'loginDeviceType'
								  )
						}}
					</el-col>

					<el-col :span="6">
						{{ $t('game.game_betslip.betting_time') }}：
						{{ dataList.createAtString || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.block_lottery_time') }}：
						{{ dataList.netAtString || '-' }}
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	name: 'TyDetails',
	components: {},
	mixins: [list],
	props: {
		dataList: {
			type: Object,
			default: () => ({})
		},
		lookMsgList: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			gameTypeList: {}
		}
	},
	computed: {
		betStatusType() {
			return this.globalDics.betStatusType || []
		},
		qklStatusType() {
			return [
				{
					code: '-2',
					description: this.$t('game.game_betslip.invalid_investment')
				},
				{
					code: '-1',
					description: this.$t('game.game_betslip.unlicensed')
				},
				{
					code: '0',
					description: this.$t('game.game_betslip.transport')
				},
				{
					code: '1',
					description: this.$t('game.game_betslip.refund')
				},
				{
					code: '2',
					description: this.$t('game.game_betslip.winning_lottery')
				}
			]
		}
	},
	watch: {},
	created() {
		// this.getGameTypeList()
	},
	mounted() {},
	methods: {
		_typeFilter(val, type) {
			const res = this.qklStatusType.find(
				(item) => item.code === String(val)
			)
			return res?.description || '-'
		},
		// getGameTypeList() {
		// 	this.$api.getMerchantGameGamePlant().then((res) => {
		// 		if (res && res.code === 200) {
		// 			this.gameTypeList = res.data || []
		// 		}
		// 	})
		// }
		amountColor (num) {
			if (parseFloat(num) > 0) return 'rgb(75, 121, 2)'
			if (parseFloat(num) < 0) return 'rgb(217, 0, 27)'

			return ''
		}
	}
}
</script>

<style lang="scss" scoped>
.paddingLR {
	padding: 0 30px;
}
::v-deep .betslip {
	line-height: 30px;
	padding: 30px;
	.strong {
		line-height: 70px;
	}
	.paddingB {
		padding-bottom: 30px;
	}
	th {
		color: #ffff;
		background: #000;
		border: 1px solid #000;
	}
}
</style>
